<template>
	<view class="job">
		<uni-search-bar   @focus="focus" placeholder="热门公司/热门岗位" />
		
		<view class="job_item" v-for="(item,index) in postlist" :key='item.id' @click='gotojobdeta' :data-comid="item.companyId" :data-id="item.id">
			<view class="job_top">
				<text class="professionName same">{{item.name}}</text>
				<text class="tak">{{item.salary}}元/月</text>
			</view>
			<view class="job_min same">
				<text>{{item.need}}</text>
				
			</view>
			<view class="job_minn same">
				<text class="obligation">{{item.obligation}}</text>
			</view>
			
			<view class="job_last same">
				<image class="img" :src="item.logo" mode=""></image>
				<text class="contacts">{{item.contacts}}</text>
				<text class="company">{{item.companyName}}</text>
				
			</view>
		</view>
	
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getcompany,getpost} from '../../api/jobApi.js'
import {jobpost} from '@/mock/work.js'


const postlist =ref([])    //招聘列表
const professionlist =ref([]) //职位列表

//获取焦点跳转页面
const focus= ()=>{
	uni.navigateTo({
		url:'/pages/job/search/search'
	})
}
//点击查看招聘的详细信息  传公司id 和岗位id
const gotojobdeta=async(e)=>{
	
	console.log(e);
	let id =e.currentTarget.dataset.id;
	let comid=e.currentTarget.dataset.comid;
	
	uni.navigateTo({
		url:`/pages/job/detail/detail?id=${id}&comid=${comid}`
		
	})
}
//获取招聘列表
const getpostdata=async()=>{
	let res = await getpost({
		header:{
			'Authorization':uni.getStorageSync('token')
		},
		data:{}
	})
	if(res.code==200){
		postlist.value=res.rows
	}else{
		//静态数据
		postlist.value=jobpost()
		
	}
	console.log(postlist.value);
}
	
onMounted(()=>{
	getpostdata()
})
</script>
<style lang="scss">
	.job{
		width: 100%;
		overflow: hidden;
		background-color: rgb(237, 241, 248);
		
		
		
		.same{
			margin: 5px;
		}
		
		.job_item{
			background-color:#fff;
			border-radius: 10px;
			margin: 10px;
			padding:16px 10px ;
			
			
		.job_top{
			display: flex;
			justify-content: space-between;
			 align-items: center;
			.professionName{
				font-weight: 700;
				font-size: 18px;
			}
			.tak{
				color: royalblue;
				font-size: 16px;
			}
			
		}	
		.job_min{
			display: flex;
			justify-content: space-between;
		}
		.job_minn{
			display: flex;
			justify-content: flex-start;	
			border-bottom: 2px solid #dfe2e5;
			color:#8e9091 ;
			.obligation{
			padding-bottom: 10px;
			}
		}
		.job_last{
			display: flex;
			justify-content: space-between;
		   align-items: center;
			
			.img{
				width: 30px;
				height: 30px;
			}
			.contacts{
				flex: 1;
				margin-left: 10px;
				
			}
		}
		
			
		}
	}

</style>
